import React,{ useEffect } from 'react' 
import { connect } from 'react-redux'
import { 
  Container,
  SongList,
  List,
  ListItem
} from './style'  
import Scroll from '@/components/common/Scroll'
import { EnterLoading } from '@/pages/Singers/style'
import Loading from '@/components/common/loading'
import { getRankList } from  './store/actionCreators'
import { filterIndex } from '@/api/utils'

 function Rank(props) {   
  const { rankList:list ,enterLoading,songsCount } = props  
  const { getRankListDispatch }  = props 

  let rankList = list ? list : [];

    useEffect(() => {
      if(!rankList.length){
          getRankListDispatch()
      }
    },[])

  const enterDetail = (detail) => {
    props.history.push(`/rank/${detail.id}`)
  }
  const renderSongList = (list) => {
    return list.length ? (
      <SongList>
        {
          list.map((item, index) => {
            return <li key={index}>{index+1}. {item.first} - {item.second}</li>
          })
        }
      </SongList>
    ) : null;
  }
  const renderRankList = (list, global) => {
    return (
      <List globalRank={global}>
       {
        list.map((item, index) => {
          return (
            <ListItem key={`${item.coverImgId}${index}`} tracks={item.tracks} onClick={() => enterDetail(item)}>
              <div className="img_wrapper">
                <img src={item.coverImgUrl} alt=""/>
                <div className="decorate"></div>
                <span className="update_frequecy">{item.updateFrequency}</span>
              </div>
              { renderSongList(item.tracks)  }
            </ListItem>
          )
       })
      } 
      </List>
    )
  }

  let globalStartIndex = filterIndex(rankList)
  // 官方榜展示内容
  let officalList = rankList.slice(0,globalStartIndex);
  // 全球榜展示内容
  let globalList = rankList.slice(globalStartIndex);
  let displayStyle = enterLoading? {"display":"none"}:{"display":""}
    return (
    <Container play={songsCount}>
      <Scroll>   
        <div>
          <h1 className="offical" style={{displayStyle}}> 官方榜</h1>
          {renderRankList(officalList)}
          <h1 className="global" style={displayStyle}>全球榜</h1>
            { renderRankList(globalList, true) }
          { enterLoading && <EnterLoading><Loading></Loading></EnterLoading> }
        </div>
      </Scroll>
      {/* {renderRoutes(props.route.routes)} */}
    </Container>
  )
}

const mapStateToProps = (state) => {
  // console.log(state)
      return {
        rankList:state.rank.rankList,
        songsCount:state.player.playList.length,
        enterLoading:state.rank.enterLoading
      }
}
// 状态改变的流程    
// 数据状态变得万无一失  
const mapDispatchToProps = (dispatch) =>{
     return { 
      getRankListDispatch(){
        // 派action 
        dispatch(getRankList())
      }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Rank)
